import styled from 'styled-components'
import {thomeColor} from 'assets/color'

export const BigShop = styled.div`
    display:flex;
    flex: 1;
    background: #fff;
    flex-direction: column;
    over-flow:hidden

`

export const CartNoGoods = styled.div`
    -ms-flex: 1;
    flex: 1;
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;


`

export const Opps = styled.div`
    width: 0.86rem;
    height:0.82rem;
    background: url(http://f5.jmstatic.com/static_cart_mobile/images/no-card-oops.png) no-repeat;
    background-size: 100% 100%;
`

export const EmptyCar = styled.div`
    font-size: .14rem;
    line-height: .24rem;
    color: #333;
    padding: 0 .12rem;
    margin-top: .16rem;
    text-align: center;
`

export const GoStroll = styled.div`
    width: 1.25rem;
    height: .36rem;
    border-radius: 1.25rem;
    color: #fff;
    background: #fe4070;
    line-height: .36rem
    text-align: center;
    margin-top: .23rem;
    font-size: .13rem;

`
export const ShopContainer = styled.div`
    display:flex;
    flex: 1;
    background:#f5f5f5;
    flex-direction: column;
    overflow: hidden;
    .lists{
        flex:1;
        overflow:hidden;
        height:100%;
        background: #fff;
    }

`
export const ShopItem = styled.div`
    display:flex;
    background: #fff;
   
    flex-direction: column;
    margin-top:.08rem
`
export const ShopItemTop = styled.div`
    height:.4rem;
    border-bottom: 1px #eee solid;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    svg{
        margin-right:.1rem;
        margin-left:.1rem;
        
    }
    span{
        color:#333;
        font-size:.12rem;
    }
`
export const ShopItemMid = styled.div`
    display:flex;
    justify-content:flex-start;
    border-bottom: 1px #eee solid;
    align-items:center;
    padding-left:.12rem;
    padding-right:.08rem;
    .item-content{
        display:flex;
        justify-content:flex-start;
        align-items:center;

        .item-left{
            height:.84rem;
            width:.84rem;
            img{
                height:100%;
                width:100%;
            }
        }
        .item-right{
            color:#333;
            height:100%;
            font-size:.12rem;
           
            margin-left:.1rem;
            h2{
                margin-top:-.04rem;
                margin-bottom:.06rem;
                em{
                    color:#fe4070;
                }
            }
            h3{
                display:flex;
                color:#999;
                justify-content:space-between;
            }
            h4{
                display:flex;
                justify-content:space-between;
                margin-top:.06rem;
                .price{
                    color:#fe4070;
                    font-size:.15rem;
                }
            }
        }
    }

`
export const ShopItemBot = styled.div`
margin-top:.05rem;
display:flex;
justify-content:flex-start;
padding-left:.12rem;
padding-right:.08rem;
font-size:.12rem;
 align-items:center;
.logo{
    color:#fe4070;
    width:.2rem;
    height:.2rem;
    border:1px #fe4070 solid;
    border-radius:50%
    display:flex;
    align-items:center;
    justify-content:center
}
span{
    color:#fe4070;
}


`
export const ShopCarButtom = styled.div`

background:#fff;
height:.5rem;
width:100%;
div{
    padding-left:.12rem;
    padding-right:.08rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:.5rem;
    p{
     .allCheck{
         color:#333;
         margin-left:.12rem;
         font-size:.14rem
     }
     .sum{
         font-size:.12rem;
         color:#999;
         margin-left:.07rem
     }
     .allprice{
        color:#fe4070;
     }
    }
    button{
         width:1.25rem;
         height:.36rem;
         background:#fe4070;
         border-radius:.3rem;
         color:#fff;
         border:0
     }
}

`
export const DetailCountContainerStyle = styled.div`
        display:flex;
        justify-content:center;
        align-items:center;
        padding:.25rem;
        color:#999;
        button{
            border-radius:50%;
            background: #fff;
            border:1px solid #eee;
            width:.3rem;
            height:.3rem
            margin:0 .1rem
            i{
                color:${thomeColor}
            }
        }
        input{

        }
`

